<script setup>
import {onMounted, reactive, ref, toRaw} from 'vue';
import axios from "axios";
import {message} from "ant-design-vue";
import storage from "../../util/storage.js";
import {useRoute} from "vue-router";
import server from "../../config/server.js";

const route = useRoute()
const data = ref([])
const examName = ref("")
const user = ref()
const practice = ref()

const loadData = () => {
  data.value = []
  practice.value = storage.get("redo")
  examName.value = practice.value.name
  console.log("route.query", route.query)
  if (route.query && route.query.type === "error") {
    data.value = JSON.parse(practice.value.error_problems)
  } else {
    data.value = JSON.parse(practice.value.problems)
  }
  console.log("practice=", practice.value)
}

// submit the result to server
const submitPracticeResult = () => {
  // validate exam name
  if (!examName.value) {
    message.warning("考试名称不能为空！")
    return
  }

  // validate user
  if (!user.value || !user.value.id || !user.value.username) {
    message.warning("请先登录！")
    router.push("/login")
    return
  }

  // calc exam result
  console.log("data.value", data.value)
  const problem_num = data.value.length
  let correct_num = 0
  let error_num = 0
  let error_problems = []
  for (let problem of data.value) {
    console.log("problem=", problem)
    if (problem.system_answer === problem.answer) {
      correct_num++
    } else {
      error_num++
      error_problems.push(problem)
    }
  }
  let score = ((correct_num / problem_num) * 100).toFixed(2)
  console.log("score=", score)
  console.log("correct_num=", correct_num)
  console.log("problem_num=", problem_num)
  console.log("error_num=", error_num)
  const problems = JSON.stringify(toRaw(data.value))
  console.log("problems=", problems)
  error_problems = JSON.stringify(error_problems)
  console.log("error_problems=", error_problems)

  // submit to server
  axios({
    method: "post",
    url: `${server.apiBaseUrl}/zdppy_ampractice_practice`,
    contentType: "application/json",
    data: {
      name: examName.value,
      user_id: user.value.id,
      username: user.value.username,
      problem_num,
      correct_num,
      error_num,
      score,
      problems,
      error_problems,
    },
  }).then(resp => {
    console.log("submit answer = ", resp.data)
    message.success("submit answer successfully!")
  })
}

onMounted(() => {
  loadData()
  user.value = storage.get("user")
})

</script>

<template>
  <div class="flex">
    <a-form layout="inline">
      <a-form-item label="考试名称">
        <a-input v-model:value="examName" placeholder="请输入考试名称"/>
      </a-form-item>
    </a-form>

    <a-button
        type="primary"
        class="bg-green-500"
        @click="submitPracticeResult"
    >
      提交答案
    </a-button>
  </div>
  <a-divider/>
  <a-list
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }"
      :data-source="data">
    <template #renderItem="{ item }">
      <a-list-item>
        <a-card :title="item.problem">
          <a-radio-group v-model:value="item.answer">
            <a-space direction="vertical">
              <a-radio
                  v-for="(v,k) in item.answers"
                  :key="k"
                  :value="k"
              >
                {{ v }}
              </a-radio>
            </a-space>
          </a-radio-group>
        </a-card>
      </a-list-item>
    </template>
  </a-list>
</template>